<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!--先引入vue.js再引入vueruter.js-->
		<link rel="stylesheet" type="text/css" href="css/msg.css"/>
		<script src="js/vue.js"></script>
		<script src="js/vue-router.js"></script>
	</head>
	<body>
		<div id="msg">
			<!--router-link 最后变成a标签-->
			<div class="msg03">
				<h5><span @click="go()">X</span>&nbsp;&nbsp;消息中心</h5>
				<router-link to="/kt">课程</router-link>
				<router-link to="/tl">讨论区</router-link>
				<router-link to="/zl">专栏</router-link>
			</div>
			<router-view></router-view>
		</div>
		<template id="kt">
			<div id="msgl1">
				<v-main1></v-main1>
				
			</div>
		</template>
		<template id="tl">
			<div class="msgl2">
				<h4>您还没有讨论哦~</h4>
			</div>
		</template>
		<template id="zl">
			<div class="msgl3">
				<h4>您还没有专栏哦~</h4>
			</div>
		</template>
		
		<template id="main1">
			<div class="ma01">
				<ul>
					<li v-for="(v,i) in msglist01">
						<p>{{v.list01}}</p>
						<span>{{v.list02}}</span>
					</li>
				</ul>
			</div>
		</template>
		
		<script type="text/javascript">
		var main1={
			template:"#main1",
			data(){
				return{					
					msglist01:[
						{list01:"想要逆风翻盘？高效制胜？暑期特训计算机课程已新鲜出炉，为你量身定制！今晚19:00正式开赛！限时免费，速戳报名>>>",list02:"38分钟前"},
						{list01:"夏天出门太热？不如宅家吹空调，学习商业插画赚取第一桶金。零基础也能插画变现，更有千元福利免费送，速来赚钱>>>",list02:"15:34"},
						{list01:"武忠祥老师亲自坐镇今晚19:30直播间！60分钟扫清复习障碍，请一定带着你的困惑来！高数满分神器请戳>>>",list02:"6-29 19:57"},
						{list01:"用2个公式讲透会计核心逻辑，3小时全面梳理基础会计考点，轻松拿下期末考>>>",list02:"6-29 15:39"},
						{list01:"朋友宅家轻松变现，你却还没实现花钱自由？门槛低、零成本、收益高，魅力声音3天养成，迈出斜杠青年第一步！限时免费听>>>",list02:"6-29 16:30"},
						{list01:"考研暑期飞跃，弯道超车从今天开始，今晚18点直播指导，陈正康老师正在等你>>>",list02:"6-29 19:43"},
						{list01:"学不完了？不！一学期的知识点真的能2小时学完>>>",list02:"6-28 15:29"},
						{list01:"武忠祥老师亲自答疑，就在6.29直播间！60分钟最专业解答你的高数复习困惑！点击预约>>>",list02:"6-28 15:29"},
						{list01:"父母总是忘东忘西？3天免费记忆力提升课帮助他们巩固记忆，让您不在担忧>>>",list02:"6-28 15:29"}
					]
				}	
			}	
		}
			var kt = {
				template:"#kt",
				components:{
					"v-main1":main1,
				}
			}
			var tl = {
				template:"#tl"
			}
			var zl = {
				template:"#zl"
			}
//			配置路由
			var router =new VueRouter({
				routes:[{
					path:"/kt",
					component:kt
				},{
					path:"/tl",
					component:tl
				},{
					path:"/zl",
					component:zl
				},{
					path:"/*",
//					重定向:当其他路径不满足时,执行此路径 , 重新指定路径
					redirect:"/kt"
				}]
			})
			new Vue({
				el:"#msg",
				data:{
					methods:{
						go(){
							window.open("index.html","_self");					
								
						}
					}
				},
//				挂载路由
				router:router
			})
			// new Vue({
			// 	el:".msg03",
			// 	data:{
			// 		methods:{
			// 			go(){
			// 				window.open("index.html","_self");					
								
			// 			}
			// 		}
			// 	}
			// })
		</script>
	</body>
</html>
